<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { useLocaleStore } from '@/store/modules/locale'
import { getZhHKAndPinyin, getZhCNAndPinyin } from '@/api/common'
import { selectModule, getDicByModuleId } from '@/api/develop'
import { getForm, saveForm, publishForm, getControlsFromEntity } from '@/api/develop/form'

defineOptions({
  name: 'FormAdd'
})

const localeStore = useLocaleStore()

const { t } = useI18n()
const { emitter } = useEmitt()
const formRef = ref()
const { currentRoute, push } = useRouter()

const state = reactive({
  // 表单数据
  formData: {
    fmId: '',
    buttons: '',
    content: '',
    tempContent: '',
    contentModified: 0,
    copyFrom: '',
    editLimitMinutes: 0,
    enName: '',
    entId: '',
    fmCols: 2,
    fmName: '',
    fmType: 1,
    fontSize: '',
    height: 0,
    hkName: '',
    icon: '',
    isBuildIn: 0,
    isReadonly: 0,
    labelStyle: 1,
    labelWidth: '',
    moduleId: '',
    remark: '',
    rowGutter: 10,
    seq: 0,
    status: 0,
    subTables: 0,
    ver: 0,
    width: 0,
    tenantId: '',
    moduleName: '',
    hkModuleName: '',
    enModuleName: '',
    entityName: '',
    hkEntityName: '',
    enEntityName: '',
    updateBy: '',
    updateTime: '',
    retrieve: false,
    controls: [{} as any]
  },
  deleteIds: [{}],

  // 校验规则
  formRules: {
    fmName: {
      required: true,
      message: t('form.name') + t('common.notEmpty'),
      trigger: ['blur']
    }
  },
  modNameField: 'moduleName',
  entityNameField: 'entityName',
  dictNameField: 'dicName',
  moduleList: [{} as any],
  loading: false,
  publishLoading: false,
  controlTypeList: [
    { key: 'input', value: t('form.ctrlInput') },
    { key: 'select', value: t('form.ctrlSelect') },
    { key: 'date', value: t('form.ctrlDate') },
    { key: 'textarea', value: t('form.ctrlTextarea') },
    { key: 'radio', value: t('form.ctrlRadio') },
    { key: 'checkbox', value: t('form.ctrlCheckbox') },
    { key: 'switch', value: t('form.ctrlSwitch') }
  ],
  inputSourceList: [
    { key: 'input', value: t('form.srcInput') },
    { key: 'dict', value: t('form.srcDict') },
    { key: 'expression', value: t('form.srcExpression') } //, { key: 'auto', value: t('form.srcAuto') }
  ],
  dictList: [{} as any]
})

//加载事件
onMounted(async () => {
  state.moduleList = await selectModule()
  //当前语言
  const curLang = localeStore.getCurrentLocale.lang
  if (curLang == 'en') {
    state.modNameField = 'enModuleName'
    state.entityNameField = 'enEntityName'
    state.dictNameField = 'enName'
  } else if (curLang == 'zh_HK') {
    state.modNameField = 'hkModuleName'
    state.entityNameField = 'hkEntityName'
    state.dictNameField = 'hkName'
  }
  init()
})

//删除表字段
const deleteRow = (row) => {
  const id = row.controlId
  if (id && id.length > 0) {
    state.deleteIds.push(id)
  }
  const index = getRowIndex(row.controlName)
  console.log('删除控件：' + row.controlName + '@' + index)
  state.formData.controls.splice(index, 1)
}
//定位要删除字段行的下标
const getRowIndex = (controlName) => {
  const length = state.formData.controls.length
  for (let i = 0; i < length; i++) {
    const col = state.formData.controls[i] as any
    if (col.controlName == controlName) {
      return i
    }
  }
  return -1
}

//删除所有行
const deleteAllRows = () => {
  let pk = null
  for (const control of state.formData.controls) {
    const ctrl = control as any
    if (ctrl.controlName == 'id') {
      pk = ctrl
      continue
    }
    let id = ctrl.controlId
    if (id && id.length > 0) {
      state.deleteIds.push(id)
    }
  }
  state.formData.controls = [pk as any]
}

//新增默认字段
const addRow = () => {
  const newIndex = state.formData.controls.length + 1
  const curOrder = getCurOrder()
  let colOrder = newIndex
  if (curOrder > 0) {
    colOrder = curOrder
  } else {
    colOrder = newIndex > 8 ? (newIndex - 8) * 10 : newIndex * 10
  }
  let row = {
    controlId: '',
    style: '',
    colId: '',
    colOrder: colOrder + 1,
    colSpans: '1',
    controlName: 'control' + newIndex,
    controlType: 'input',
    defaultVal: '',
    editAfterApprove: 0,
    extHtml: '',
    extSettings: '',
    formId: state.formData.fmId,
    inputSource: 'input',
    sourceFilter: '',
    dictId: '',
    isExport: 0,
    isHide: 0,
    isReadonly: 0,
    isRequired: 0,
    labelEn: '',
    labelHk: '',
    labelText: '',
    placeholder: '',
    hideCond: '',
    readonlyCond: '',
    requiredCond: '',
    sqlExpression: '',
    subTable: 0,
    title: '',
    maxLength: 0
  }
  state.formData.controls.push(row)
  return row
}

//获取最后自定义控件的显示顺序
const getCurOrder = () => {
  let index = 0
  for (const control of state.formData.controls) {
    const ctrl = control as any
    if (ctrl.colId) {
      continue
    }
    if (ctrl.colOrder > index) {
      index = ctrl.colOrder
    }
  }
  return index
}

//重新生成控件（一般在实体段修改后调用）
const retrieveControls = async () => {
  let tips = t('form.retrieveTip')
  ElMessageBox.confirm(tips, t('entity.confirm'), {
    type: 'warning'
  }).then(() => {
    getControlsFromEntity(state.formData.fmId, state.formData.entId).then((res) => {
      const result = res as any
      if (!res) {
        return
      }
      //重置成功
      if (result.success) {
        let controls = result.data as any
        if (!controls || controls.length == 0) {
          return
        }
        //清空与实体字段关联的控件
        let oldControls = state.formData.controls as any
        for (let i = oldControls.length - 1; i >= 0; i--) {
          if (oldControls[i].colId) {
            oldControls.splice(i, 1)
          }
        }
        oldControls.push(...controls)
        state.formData.retrieve = true
        state.formData.contentModified = 0
        state.deleteIds = []
      }
    })
  })
}

//发布表单
const publish = async () => {
  let tips = t('entity.publishTip2')
  ElMessageBox.confirm(tips, t('entity.confirm'), {
    type: 'warning'
  }).then(() => {
    state.publishLoading = true
    publishForm(state.formData.fmId).then((res) => {
      const result = res as any
      state.publishLoading = false
      if (!res) {
        return
      }
      //发布成功
      if (result.success) {
        //刷新列表
        emitter.emit('refreshFormList')
        ElMessage.success(t(result.message))
        goBack()
        return
      }
    })
  })
}
// 保存表单
const save = () => {
  formRef.value.validate(async (vaild) => {
    if (!vaild) {
      return
    }
    let form = Object.assign({}, state.formData)
    //校验明细记录
    if (!state.formData.controls || state.formData.controls.length == 0) {
      ElMessage.warning(t('entity.noFields'))
      return
    }
    for (let row2 of state.formData.controls) {
      const row = row2 as any
      if (row.controlName == '' || row.labelText == '') {
        ElMessage.warning(t('dataDict.rowCheck'))
        return
      }
    }
    let deleteIds = ''
    if (state.deleteIds && state.deleteIds.length > 0) {
      deleteIds = state.deleteIds.join(',')
    }
    let data = { form: form, deleteIds: deleteIds }
    state.loading = true
    await saveForm(data).then((res) => {
      const result = res as any
      state.loading = false
      if (!res) {
        return
      }
      //保存成功
      if (result.success) {
        //刷新列表
        emitter.emit('refreshFormList')
        ElMessage.success(t('group.saveSuccess'))
        if (!state.formData.entId) {
          goBack()
        }
        state.formData.seq += 1
      }
    })
  })
}

//表单类型改变时事件
const changeType = (type) => {
  if (type == 1) {
    state.formData.fmCols = 2
  } else {
    state.formData.fmCols = 1
  }
}

//查看实体
const viewEntity = () => {
  push({
    name: 'EntityAdd',
    query: {
      id: state.formData.entId,
      fromPath: currentRoute.value.fullPath
    }
  })
}

//设计
const design = (id) => {
  push({
    name: 'FormDesign',
    query: {
      id: id,
      fromPath: currentRoute.value.fullPath
    }
  })
}
//预览
const preview = (id) => {
  push({
    name: 'FormShow',
    query: {
      pkId: null,
      formId: id,
      readonly: 0,
      preview: 1,
      fromPath: currentRoute.value.fullPath
    }
  })
}

// 返回列表
const goBack = () => {
  emitter.emit('closeTag', {
    closePath: currentRoute.value.fullPath,
    backPath: '/Develop/FormManage'
  })
}

/**
 * @description 当繁体中文为空时，转换简体中文为繁体中文
 * @author Elwin ZHANG
 * @date 2023-03-21 10:33
 */
const zhHKAndPinyin = async (event) => {
  const text = event.target.value
  if (!text || text.length == 0) {
    return
  }
  //繁体中文为空时才自动转换
  if (state.formData.hkName.length > 0) {
    return
  }
  let data = (await getZhHKAndPinyin(text, 50)) as any
  state.formData.hkName = data.data.zhHK
  //如果英文字段为空，默认为拼音
  if (state.formData.enName.length == 0) {
    state.formData.enName = data.data.pinyin
  }
  formRef.value.clearValidate(['fmName', 'enName'])
}

/**
 * 子表输入简体中文后的事件
 * @param event 事件
 * @param row 当前行记录
 */
const inputCnText = async (event, row) => {
  const text = event.target.value
  if (!text || text.length == 0) {
    return
  }
  if (row.labelHk.length > 0) {
    return
  }
  let data = (await getZhHKAndPinyin(text, 50)) as any
  row.labelHk = data.data.zhHK
  //如果英文字段为空，默认为拼音
  if (row.labelEn.length == 0) {
    row.labelEn = data.data.pinyin
  }
}

/**
 * 子表输入繁体中文后的事件
 * @param event 事件
 * @param row 当前行记录
 */
const inputHkText = async (event, row) => {
  const text = event.target.value
  if (!text || text.length == 0) {
    return
  }
  if (row.labelText.length > 0) {
    return
  }
  let data = (await getZhCNAndPinyin(text, 50)) as any
  row.labelText = data.data.zhCN
  //如果英文字段为空，默认为拼音
  if (row.labelEn.length == 0) {
    row.labelEn = data.data.pinyin
  }
}

/**
 * @description 当简体中文为空时，转换繁体中文为简体中文
 * @author Elwin ZHANG
 * @date 2023-03-21 10:33
 */
const zhCNAndPinyin = async (event) => {
  const text = event.target.value
  if (!text || text.length == 0) {
    return
  }
  //简体中文为空时才自动转换
  if (state.formData.fmName.length > 0) {
    return
  }
  let data = (await getZhCNAndPinyin(text, 50)) as any
  state.formData.fmName = data.data.zhCN
  //如果英文字段为空，默认为拼音
  if (state.formData.enName.length == 0) {
    state.formData.enName = data.data.pinyin
  }
  formRef.value.clearValidate(['enName', 'hkName'])
}

//渲染页面的接口
const init = async () => {
  const id = currentRoute.value.query.id as string
  state.deleteIds = []
  state.formData.controls = []
  //修改
  if (id) {
    const data = (await getForm(id)) as any
    state.formData = data.data
    getDictList(state.formData.moduleId)
  } else {
    ElMessage.warning(t('user.paramError'))
    goBack()
  }
}

//获取数据字典列表
const getDictList = async (moduleId) => {
  state.dictList = (await getDicByModuleId(moduleId)).data
}
</script>

<template>
  <div>
    <!-- 卡片表頭 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ $t('form.edit') }}</span>
        </div>
      </template>
      <el-form
        ref="formRef"
        :model="state.formData"
        :rules="state.formRules"
        class="demo-form-inline"
        label-position="left"
        label-width="150px"
        style="padding-top: 10px"
      >
        <el-row :gutter="40">
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item :label="$t('orderNo.module')" prop="moduleId">
              <el-input disabled v-model="state.formData[state.modNameField]" />
            </el-form-item>
            <el-form-item :label="$t('form.name')" prop="fmName">
              <el-input
                v-model="state.formData.fmName"
                :placeholder="$t('common.inputText') + $t('form.name')"
                maxlength="30"
                show-word-limit
                @blur="zhHKAndPinyin($event)"
              />
            </el-form-item>
            <el-form-item :label="$t('common.hkName')" prop="hkName">
              <el-input
                v-model="state.formData.hkName"
                :placeholder="$t('common.inputText') + $t('common.hkName')"
                maxlength="30"
                show-word-limit
                @blur="zhCNAndPinyin($event)"
              />
            </el-form-item>
            <el-form-item :label="$t('common.enName')" prop="enName">
              <el-input
                v-model="state.formData.enName"
                :placeholder="$t('common.inputText') + $t('common.enName')"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
            <el-form-item :label="$t('menu.icon')" prop="icon" class="normal_label">
              <el-input
                v-model="state.formData.icon"
                :placeholder="$t('common.inputText') + $t('menu.icon')"
                maxlength="64"
                style="width: 100%"
              >
                <template #append>
                  <el-link href="https://icon-sets.iconify.design/" target="_blank">
                    {{ $t('common.query') }}</el-link
                  >
                </template>
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('common.status')" prop="status">
              <el-input
                v-if="state.formData.status == 1"
                :model-value="$t('entity.status1')"
                :disabled="true"
              />
              <el-input v-else :model-value="$t('entity.status0')" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item :label="$t('entity.name')" prop="entName">
              <el-input v-model="state.formData[state.entityNameField]" disabled />
            </el-form-item>
            <el-form-item :label="$t('form.type')" prop="fmType" @change="changeType($event)">
              <el-radio-group v-model="state.formData.fmType">
                <el-radio :label="1">PC</el-radio>
                <el-radio :label="2">{{ $t('form.type2') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('form.cols')" prop="fmCols" v-if="state.formData.fmType == 1">
              <el-input-number
                v-model="state.formData.fmCols"
                :min="1"
                :max="3"
                size="small"
                style="width: 100%"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item :label="$t('form.width')" prop="width">
              <el-input-number
                v-model="state.formData.width"
                :min="400"
                :max="3800"
                :step="100"
                size="small"
                style="width: 100%"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item :label="$t('form.height')" prop="height">
              <el-input-number
                v-model="state.formData.height"
                :min="300"
                :max="2000"
                :step="100"
                size="small"
                style="width: 100%"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item
              :label="$t('common.updateBy')"
              prop="updateBy"
              v-if="state.formData.entId"
            >
              <el-input v-model="state.formData.updateBy" disabled />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item :label="$t('form.readonly')" prop="isReadonly">
              <el-radio-group v-model="state.formData.isReadonly">
                <el-radio :label="1">{{ $t('common.yes') }}</el-radio>
                <el-radio :label="0">{{ $t('common.no') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('form.labelWidth')" prop="labelWidth">
              <el-input
                v-model="state.formData.labelWidth"
                :placeholder="$t('common.inputText') + $t('form.labelWidth')"
                maxlength="10"
                show-word-limit
              />
            </el-form-item>
            <el-form-item :label="$t('form.ver')" prop="ver">
              <el-input v-model="state.formData.ver" disabled />
            </el-form-item>
            <el-form-item :label="$t('common.remark')" prop="remark">
              <el-input v-model="state.formData.remark" maxlength="100" show-word-limit />
            </el-form-item>
            <el-form-item
              :label="$t('common.updateTime')"
              prop="updateTime"
              v-if="state.formData.fmId"
            >
              <el-input v-model="state.formData.updateTime" disabled />
            </el-form-item>
            <el-alert
              :title="$t('form.modified' + state.formData.contentModified)"
              type="warning"
              :closable="false"
              style="font-size: 12px; height: 29px"
            />
          </el-col>
        </el-row>
      </el-form>
      <div style="margin: 10px 0">
        <el-row>
          <el-col :span="8">
            <div style="margin-top: 5px; font-size: 14px; color: #999; font-weight: bold"
              >&nbsp;{{ $t('form.controls') }}
            </div>
          </el-col>
          <el-col :span="16" style="text-align: right">
            <el-button type="default" size="small" plain @click="viewEntity()">
              <Icon icon="fluent:table-edit-28-filled" />
              <span>{{ t('form.viewEnt') }}</span>
            </el-button>
            <el-button type="warning" size="small" plain @click="retrieveControls()">
              <Icon icon="fluent:convert-range-20-filled" />
              <span>{{ t('form.retrieveButton') }}</span>
            </el-button>
            <el-button type="danger" size="small" plain @click="deleteAllRows()">
              <Icon icon="material-symbols:cleaning-services" />
              <span>{{ t('form.delAll') }}</span>
            </el-button>
            <el-button type="success" size="small" plain @click="addRow()">
              <Icon icon="material-symbols:add-circle-rounded" />
              <span>{{ t('form.addControl') }}</span>
            </el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 子表控件 -->
      <el-scrollbar>
        <div>
          <el-table
            :data="state.formData.controls"
            tooltip-effect="light"
            style="width: 100%; border-color: #a0cfff; font-size: 12px"
            stripe
            default-expand-all
            border
            size="small"
            :default-sort="{ prop: 'colOrder', order: 'ascending' }"
            :header-cell-style="{
              background: 'var(--el-color-primary-light-9)',
              color: '#409eff'
            }"
          >
            <el-table-column type="index" width="35" fixed>
              <template #header>
                <div style="margin-bottom: -10px">
                  <Icon
                    icon="ant-design:field-number-outlined"
                    size="24"
                    :title="$t('common.number')"
                /></div>
              </template>
            </el-table-column>
            <el-table-column
              prop="controlName"
              :label="'*' + $t('form.controlName')"
              min-width="105"
              fixed
            >
              <template #default="scope">
                <el-input
                  v-model="scope.row.controlName"
                  :maxlength="50"
                  :disabled="scope.row.colId?.length > 0"
                />
              </template>
            </el-table-column>
            <el-table-column prop="labelText" :label="'*' + $t('form.labelCn')" min-width="110">
              <template #default="scope">
                <el-input
                  v-model="scope.row.labelText"
                  :maxlength="50"
                  @blur="inputCnText($event, scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="labelHk" :label="$t('form.labelHk')" min-width="110">
              <template #default="scope">
                <el-input
                  v-model="scope.row.labelHk"
                  :maxlength="50"
                  @blur="inputHkText($event, scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="labelEn" :label="$t('form.labelEn')" min-width="110">
              <template #default="scope">
                <el-input v-model="scope.row.labelEn" :maxlength="50" />
              </template>
            </el-table-column>
            <el-table-column prop="controlType" :label="$t('form.ctrlType')" width="110">
              <template #default="scope">
                <el-select v-model="scope.row.controlType" filterable size="default">
                  <el-option
                    v-for="item in state.controlTypeList"
                    :key="item['key']"
                    :label="item['value']"
                    :value="item['key']"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="colSpans" :label="$t('form.colSpans')" width="90">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.colSpans"
                  :min="1"
                  :max="8"
                  size="small"
                  :step="2"
                  style="width: 100%"
                  controls-position="right"
                />
              </template>
            </el-table-column>
            <el-table-column prop="isReadonly" :label="$t('form.colRO')" width="58">
              <template #default="scope">
                <el-switch
                  v-model.number="scope.row.isReadonly"
                  :active-value="1"
                  :inactive-value="0"
                  :disabled="scope.row.inputSource == 'auto' || state.formData.isReadonly == 1"
                />
              </template>
            </el-table-column>
            <el-table-column prop="isRequired" :label="$t('form.colRQD')" width="58">
              <template #default="scope">
                <el-switch
                  v-model.number="scope.row.isRequired"
                  :active-value="1"
                  :inactive-value="0"
                  :disabled="scope.row.inputSource == 'auto'"
                />
              </template>
            </el-table-column>
            <el-table-column prop="isHide" :label="$t('entity.hide')" width="58">
              <template #default="scope">
                <el-switch
                  v-model.number="scope.row.isHide"
                  :active-value="1"
                  :inactive-value="0"
                />
              </template>
            </el-table-column>
            <el-table-column prop="maxLength" :label="$t('form.maxLength')" width="90">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.maxLength"
                  :min="0"
                  :max="500"
                  :step="5"
                  size="small"
                  style="width: 100%"
                  controls-position="right"
                  :disabled="
                    scope.row.inputSource == 'auto' ||
                    state.formData.isReadonly == 1 ||
                    scope.row.readonly
                  "
                />
              </template>
            </el-table-column>
            <el-table-column prop="inputSource" :label="$t('form.inputSource')" width="110">
              <template #default="scope">
                <el-select
                  v-model="scope.row.inputSource"
                  filterable
                  size="default"
                  v-if="scope.row.inputSource != 'auto'"
                >
                  <el-option
                    v-for="item in state.inputSourceList"
                    :key="item['key']"
                    :label="item['value']"
                    :value="item['key']"
                  />
                </el-select>
                <span v-if="scope.row.inputSource == 'auto'">{{ $t('form.srcAuto') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="defaultVal" :label="$t('entity.defautVal')" min-width="60">
              <template #default="scope">
                <el-input v-model="scope.row.defaultVal" />
              </template>
            </el-table-column>
            <el-table-column prop="dictId" :label="$t('form.srcDict')" width="110">
              <template #default="scope">
                <el-select
                  v-model="scope.row.dictId"
                  filterable
                  size="default"
                  v-if="scope.row.inputSource == 'dict'"
                >
                  <el-option
                    v-for="item in state.dictList"
                    :key="item.dicId"
                    :label="item[state.dictNameField]"
                    :value="item.dicId"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="sourceFilter" :label="$t('form.sourceFilter')" min-width="100">
              <template #default="scope">
                <el-input v-model="scope.row.sourceFilter" />
              </template>
            </el-table-column>
            <el-table-column prop="sqlExpression" :label="$t('form.sqlExpression')" min-width="100">
              <template #default="scope">
                <el-input v-model="scope.row.sqlExpression" />
              </template>
            </el-table-column>
            <el-table-column prop="placeholder" :label="$t('form.placeholder')" min-width="100">
              <template #default="scope">
                <el-input
                  v-model="scope.row.placeholder"
                  :maxlength="50"
                  :disabled="scope.row.inputSource == 'auto'"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="colOrder"
              align="right"
              :label="$t('common.sort')"
              width="68"
              sortable
            >
              <template #default="scope">
                <el-input v-model.number="scope.row.colOrder" :maxlength="9" type="number" />
              </template>
            </el-table-column>
            <el-table-column
              prop="op"
              align="center"
              :label="$t('common.operation')"
              width="80"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  v-if="scope.row.controlName != 'id'"
                  type="danger"
                  size="small"
                  plain
                  circle
                  :title="$t('common.delete')"
                  @click="deleteRow(scope.row)"
                >
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </template>
            </el-table-column>
          </el-table> </div
      ></el-scrollbar>
      <div class="detailFooter">
        <el-button
          type="primary"
          plain
          @click="save()"
          :loading="state.loading"
          v-if="state.formData.isBuildIn != 1"
        >
          <el-icon><Check /></el-icon>&nbsp;{{ $t('common.save') }}
        </el-button>
        <el-button type="success" plain @click="design(state.formData.fmId)">
          <Icon icon="logos:vue" />&nbsp; {{ $t('form.design') }}
        </el-button>
        <el-button type="success" plain @click="preview(state.formData.fmId)">
          <Icon icon="icon-park-outline:preview-open" />&nbsp;{{ $t('form.preview') }}
        </el-button>
        <el-button
          type="success"
          plain
          :loading="state.publishLoading"
          @click="publish()"
          v-if="state.formData.entId && state.formData.status != 4 && state.formData.isBuildIn == 0"
          :title="$t('entity.publishBtnTip')"
        >
          <Icon icon="fluent:database-arrow-up-20-filled" />&nbsp;<span
            v-if="state.formData.status == 0"
            >{{ $t('entity.publish') }}</span
          ><span v-if="state.formData.status == 1">{{ $t('entity.rePublish') }}</span>
        </el-button>
        <el-button type="info" plain @click="goBack()">
          <el-icon><Close /></el-icon>&nbsp;{{ $t('form.close') }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
.box-card {
  .card-header {
    font-size: 16px;
    letter-spacing: 1px;
  }
  :deep(.el-input) {
    font-size: 12px;
  }
  :deep(.el-textarea__inner) {
    height: 85px;
    font-size: 12px;
  }
}
:deep(.el-input__inner) {
  &::placeholder {
    font-size: 12px;
  }
}
.el-select-dropdown__item {
  font-size: 12px;
}
.required {
  color: red;
}
.inputRequired {
  width: 90%;
  margin-left: 3px;
}
</style>
